<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
  }
  .bg{
    height:100vh;
    width:100%;
    background-image:url("http://weixin.nmict.cn/vux-card-selnum/bgImg.png");
    background-size:contain;
    background-color:#f9f9f9;
    background-repeat:no-repeat;
    background-position: center center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
  }
  .btn{
    width:40%;
    height:15em;
    background-image: url("http://weixin.nmict.cn/vux-card-selnum/btn.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:bottom center;
    margin:2em auto;
    z-index: 10;
    position: relative;
  }
  
  .animated {
	    -webkit-animation-duration: 1s;
	    animation-duration: 1s;
	    -webkit-animation-fill-mode: both;
	    animation-fill-mode: both;
	}
	.animated.infinite {
	    -webkit-animation-iteration-count: infinite;
	    animation-iteration-count: infinite;
	}
	@keyframes pulse {
	  0% {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	  }
	
	  50% {
	    -webkit-transform: scale3d(1.05, 1.05, 1.05);
	    transform: scale3d(1.05, 1.05, 1.05);
	  }
	
	  100% {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	  }
	}
	

	
	.pulse {
	  -webkit-animation-name: pulse;
	  animation-name: pulse;
	}
</style>



<template>
  <div class="bg">
    <div class="btn position-abs infinite animated pulse"  @click="jump('OrderAdd')"></div>
  </div>
</template>

<script>
  import { Swiper, Grid, GridItem, Panel,XButton,Marquee, MarqueeItem } from 'vux'
  export default {
    data() {
      return {

      }
    },
    methods: {
      jump(name){
        this.$router.push({name})
      }
    },
    components: {
      Swiper,
      Grid, GridItem,
      Panel,
      XButton,
      Marquee, MarqueeItem
    }
  }
</script>

